<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //T1
  // function fn1() {
  //   console.log(1);
  //   fn2();
  // }
  // function fn2() {
  //   setTimeout(() => {
  //     console.log(2);
  //   }, 100);
  //   console.log(3);
  //   //new Promise 同步
  //   //then 和 resolve 异步
  //   new Promise(function (res, rej) {
  //     console.log(4);
  //     //这里的res是吧promise状态转成 成功 用的
  //     res(5);
  //   }).then((res) => {
  //     console.log(res); //5
  //   });
  // }
  // fn1();

   /* 
 1.调用fn1，fn1里面首先就是打印了1，然后调用fn2函数
 2.fn2里面首先是一个计时器，属于宏任务，所以先放到队列里面不执行
 3.计时器之后是打印3，属于同步，所以直接打印出来（1,3）
 4.new Promise也属于同步，所以直接打印里面的4（1,3,4）
 5.打印完4后，是一个转换成功的状态，把结果传递给then里面，then属于微任务，也先放到队列里面不执行
 6.同步走完之后，开始从异步队列里调用
 7.先执行微任务，再执行宏任务，所以最后结果是（1,3,4,5,2）
 */
  /*
  主：1 3 4
  微：5
  宏：2
  1 3 4 5(微) 2(宏)
  */


// T2
  // setTimeout(() => {
  //   console.log(1);
  //   setTimeout(() => {
  //     console.log(2);
  //   }, 0);
  //   setTimeout(() => {
  //     console.log(3);
  //   }, 0);
  // }, 0);
  // setTimeout(() => {
  //   console.log(4);
  // }, 0);

  /* 
  （这里由于计时器都是0ms，所以按顺序放进队列）
  1.这里有两个大的计时器，都属于宏任务
  2.两个计时器按顺序放进队列中
  3.先执行第一个计时器，第一个计时器里先打印1，剩余两个小计时器，按顺序放进队列里（此时还有一个大计时器在两个小计时器前面）
  4.第一个计时器执行完毕，到第二个大计时器执行（1,4）
  5.剩余两个小计时器按顺序执行（1,4,2,3）
   */
// 1 4 2 3

//   //T3
  // console.log("script start");

  // setTimeout(() => {
  //   console.log("timeout1");
  // }, 10);

  // new Promise((resolve) => {
  //   console.log("promise1");
  //   resolve();
  //   setTimeout(() => {
  //     console.log("timeout2");
  //   }, 10);
  // }).then(() => {
  //   console.log("then1");
  // });
  // console.log("script end");

  /* 
  1.先遇到script start，属于同步先打印
  2.遇到计时器timeout1，属于宏任务，先不执行放到队列中
  3.new Promise属于同步里面打印的promise直接打印（script start，promise）
  4.遇到计时器timeout2，同第2步
  5.then是属于微任务，也放到队列中
  6.遇到script end，属于同步直接打印（script start，promise，script end）
  7.队列里先执行微任务，再执行宏任务
  8.所以最终打印的顺序（script start，promise，script end，then1，timeout1，timeout2）
  */
  /*
  同步：script start   promise1   script end
  异步
    微：then1
    宏：timeout1   timeout2
  */

//   //T4
  // async function async1() {
  //   console.log("A");
  //   async2();
  //   console.log("B");
  // }
  // async function async2() {
  //   console.log("C");
  // }
  // console.log("D");
  // setTimeout(() => {
  //   console.log("F");
  // }, 0);
  // async1();
  // new Promise((resolve) => {
  //   console.log("G");
  //   resolve();
  // }).then(() => {
  //   console.log("H");
  // });
  // console.log("I");

/* 
1.首先遇到打印D，属于同步直接打印
2.遇到计时器F，属于宏任务放进队列
3.调用async1函数
4.async1函数里都属于同步步骤，所以按顺序打印出来（D,A,C,B）
5.new Promise 是同步，直接打印G（D,A,C,B,G）
6.then是微任务，放进队列
7.直接打印I（D,A,C,B,G,I）
8.队列里先微再宏，最终结果（D,A,C,B,G,I,H,F）
*/
  /*
  同步：D A C B G I
  异步
    微：H
    宏：F
  */

//T5
// async function haha() {
//   console.log(1);
//   //微任务
//   await xixi();
//   console.log(2);
//   console.log(4);
//   heihei();
// }
// async function xixi() {
//   console.log(3);
//   //宏任务
//   setTimeout(() => {
//     console.log(6);
//   }, 0);
// }
// function heihei() {
//   console.log(5);
// }
// haha();

/* 
1.调用haha函数，先打印1
2.遇到xixi函数，里面先打印3，计时器6放进队列（1,3）
3.await后面的内容都属于微任务，按顺序放进队列
4.队列里按顺序先微后宏，所以结果（1,3,2,4,5,6）
*/

// //1 3 2 4 5 6

  //T6
  async function async1() {
    console.log("async1 start");
    //在async函数中，遇到await 会继续执行其他代码 再将await后面的代码放入微任务队列中
    await async2();
    console.log("async1 end"); //
  }
  async function async2() {
    console.log("async2");
  }
  console.log("script start");
  setTimeout(() => {
    console.log("setTimeout");
  }, 0);
  async1();
  new Promise(function (resolve) {
    console.log("promise1");
    resolve();
  }).then(function () {
    console.log("promise2");
  });

  /* 
  1.先打印script start
  2.计时器setTimeout是宏任务先放入队列里
  3.调用async1函数，先打印async1 start
  （script start，async1 start）
  4.遇到await会继续执行其代码，函数体内await之后的代码是微任务放入队列中
  （script start，async1 start，async2）
  5.new Promise属于同步直接执行打印promise1
  （script start，async1 start，async2，promise1）
  6.then属于微任务promise2放入队列中
  7.队列中先微后宏，最后结果
  （script start，async1 start，async2，promise1，async1 end，promise2，setTimeout）
  */
  /*
  同步：script start      async1 start  async2      promise1
  异步：
    微：async1 end      promise2
    宏：setTimeout
  */
    </script>
</body>

</html>